{% extends "base.html" %}

{% set active_page = "Login" %}


{% block body %}

<div class="row" style="margin-bottom: 20px">
    <div class="col-sm-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <h2>
            Profile of {{ user.email }}
        </h2>
    </div>
</div>

<div class="row">
    <div class="col-sm-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <table class="table table-bordered">

            <tr>
                <td class="active result" width="120px" style="text-align: right;">
                    Username:
                </td>
                <td class="active result">
                    {{ user.email }}
                </td>
            </tr>

            <tr>
                <td class="active result" style="text-align: right;">
                    API Key:
                </td>
                <td class="active result">
                    {{ user.api_key }}
                </td>
            </tr>

            <tr>
                <td class="active result" style="text-align: right;">
                    Active:
                </td>
                <td class="active result">
                    {{ user.active }}
                </td>
            </tr>

        </table>
    </div>
</div>

<div class="row">
<!-- user change own password -->
    <div class="col-sm-12 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#user_change_password_modal" style="width: 100%">
            Change Password
        </button>
        <div id="user_change_password_modal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Change User Password</h4>
                    </div>

                    <div class="modal-body">
                        <form method="post">

                            <div style="padding: 15px; margin-bottom: -15px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input id="password1" type="password" class="form-control" name="old_password" placeholder="old password" required>
                            </div>

                            <div style="padding: 15px; margin-bottom: -15px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input id="user_change_password" type="password" class="form-control" name="new_password" placeholder="new password" required>
                            </div>

                            <div style="padding: 15px; margin-bottom: -15px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input id="password2" type="password" class="form-control" name="new_password_confirm" placeholder="confirm new password" required>
                            </div>

                            <div style="padding: 15px">
                                <button type="submit" id="user_change_password_button" value="user_change_password">Submit</button>
                            </div>

                        </form>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}